<template>
	<view style="flex: 1;">
		<view style="position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-color: #F7F7F7">
			<image src="@/static/purse/background.png" mode="widthFix" style="width: 750rpx;padding: 0;" />
		</view>
		<scroll-view style="flex: 1;" scroll-y="true" show-scrollbar="false">
			<view class="head">
				<view class="edge">
					<image class="image" src="@/static/public/arrow_left_FFFFFF.png" mode="heightFix" @click="goBack">
					</image>
				</view>
				<view class="text">我的钱包</view>
				<view class="edge"></view>
			</view>
			<view class="price_module">
				<!-- <view style="position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 0;">
					<image src="@/static/purse/price_module.png" mode="widthFix" style="width: 710rpx;" />
				</view> -->
				<view class="title">
					<image class="image" src="@/static/purse/guarantee_FFFFFF.png" mode="heightFix"></image>
					<view class="text">资金保障中</view>
				</view>
				<view class="content">
					<view class="record">
						<view class="text">充值记录</view>
						<image class="image" src="@/static/public/arrow_right_909090.png" mode="heightFix"></image>
					</view>
					<view class="tap">
						<view class="text">金额（元）</view>
						<image class="image" src="@/static/login/eye-open-C5C5C5.png" mode="heightFix"></image>
					</view>
					<view class="price">1,919,810.99</view>
					<view class="top-upAndWithdraw">
						<view class="top-up">充值</view>
						<view class="withdraw">提现</view>
					</view>
				</view>
			</view>
			<view class="bank-card">
				<image class="image" src="@/static/purse/bank-card.png" mode="heightFix"></image>
				<view class="titleAndContent">
					<view class="title">银行卡</view>
					<view class="content">已绑3张银行卡</view>
				</view>
				<view class="add">去绑卡</view>
			</view>
			<view class="detail">
				<view class="title">
					<view class="tap">资金明细</view>
					<view class="text">全部</view>
					<image class="image" src="@/static/public/arrow_right_909090.png" mode="heightFix"></image>
				</view>
				<view class="line"></view>
				<view class="monthAndCheck" v-for="i in 5">
					<view class="month">2023年12月</view>
					<view class="check" v-for="index in 4">
						<view class="tapAndPrice">
							<view class="tap">服务费</view>
							<view class="price" :style="{color:index%2==0?'#FF3B3B':'#3A9BFF'}">100.00</view>
						</view>
						<view class="time">2023-12-11 11:11:11</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script setup>
	import { ref } from 'vue';
	const user = ref();
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}
</script>
<style lang="scss">
	@import "@/uni.scss";

	.head {
		margin-top: 85rpx;
		padding: 0 26rpx;
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;

		.edge {
			width: 100rpx;
		}

		.text {
			width: 498rpx;
			text-align: center;
			color: #FFFFFF;
			line-height: 48rpx;
			font-size: 34rpx;
		}

		.image {
			height: 38rpx;

		}
	}

	.price_module {
		margin: 32rpx 20rpx;
		position: relative;
		background-image: url("@/static/purse/price_module.png");
		background-size: 100%;
		background-repeat: no-repeat;

		.title {
			height: 42rpx;
			justify-content: center;
			align-items: center;
			margin-top: 21rpx;
			padding-top: 21rpx;
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;

			.image {
				height: 30rpx;
			}

			.text {
				color: #FFFFFF;
				line-height: 42rpx;
				font-size: 30rpx;
				margin-left: 11rpx;
			}
		}

		.content {
			// margin-top: 18rpx;
			background-color: #F0F3FA;
			border-radius: 48rpx;
			padding-bottom: 24rpx;
			z-index: 1;

			.record {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				justify-content: flex-end;
				align-items: center;
				margin: 60rpx 27rpx 0 0;
				padding-top: 30rpx;

				.text {
					margin-right: 6rpx;
					line-height: 33rpx;
					font-size: 24rpx;
					text-align: right;
					color: #5F5F5F;
				}

				.image {
					height: 21rpx;
				}
			}

			.tap {
				margin-top: 12rpx;
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				justify-content: center;
				align-items: center;

				.text {
					line-height: 42rpx;
					font-size: 30rpx;
				}

				.image {
					height: 27rpx;
				}
			}

			.price {
				line-height: 116rpx;
				font-size: 83rpx;
				font-weight: 900;
				text-align: center;
			}

			.top-upAndWithdraw {
				margin-top: 41rpx;
				align-items: center;

				.top-up,
				.withdraw {
					margin: auto;
					width: 652rpx;
					line-height: 98rpx;
					border-radius: 49rpx;
					text-align: center;
					font-size: 30rpx;
				}

				.top-up {
					background-color: #0084FF;
					color: #FFFFFF;
				}

				.withdraw {
					margin-top: 30rpx;
					background-color: #D8ECFF;
					color: #0084FF;
				}
			}
		}
	}

	.bank-card {
		margin: 30rpx 20rpx;
		height: 146rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 25rpx 28rpx;
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: center;

		.image {
			height: 96rpx;
		}

		.titleAndContent {
			margin-left: 28rpx;
			width: 383rpx;
			box-sizing: border-box;

			.title {
				line-height: 42rpx;
				font-size: 30rpx;
				font-weight: 900;
			}

			.content {
				margin-top: 6rpx;
				line-height: 42rpx;
				font-size: 26rpx;
				color: #7A7A7A;
			}
		}

		.add {
			width: 149rpx;
			font-size: 28rpx;
			color: #2F70F7;
			height: 61rpx;
			line-height: 59rpx;
			text-align: center;
			border-radius: 43rpx;
			border: 2rpx solid #387DF9;
			box-sizing: border-box;
		}
	}

	.detail {
		margin: 0 20rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		padding: 38rpx 26rpx;
		margin-bottom: 50rpx;

		.title {
			align-items: center;
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;

			.tap {
				line-height: 42rpx;
				font-size: 30rpx;
				font-weight: 900;
				width: 580rpx;
			}

			.text {
				line-height: 42rpx;
				font-size: 28rpx;
				color: #4F4F4F;
				width: 61rpx;
				text-align: right;
				margin-right: 5rpx;
			}

			.image {
				height: 21rpx;
			}
		}

		.line {
			margin: 29rpx 0;
			height: 2rpx;
			border: 1rpx solid #E4E4E4;
		}

		.monthAndCheck {
			.month {
				line-height: 33rpx;
				font-size: 24rpx;
				color: #8B8B8B;
				margin-bottom: 30rpx;
			}

			.check {
				margin-bottom: 30rpx;

				.tapAndPrice {
					display: flex;
					flex-wrap: wrap;
					box-sizing: border-box;

					.tap,
					.price {
						width: 329rpx;
						line-height: 50rpx;
						font-weight: 900;
					}

					.tap {
						font-size: 30rpx;
					}

					.price {
						font-size: 36rpx;
						text-align: right;
					}
				}

				.time {
					margin-top: 6rpx;
					line-height: 33rpx;
					font-size: 24rpx;
					color: #8B8B8B;
				}
			}
		}
	}
</style>